<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        #pagecut {
            display: flex;
            margin-top: 20px;
        }
        
        ul>li {
            padding: 6px;
        }
        
        .pages,
        ol {
            display: flex;
            align-items: center;
            margin: 0 5px;
        }
        
        .pages p,
        ol li {
            padding: 6px 8px;
            margin: 0 2px;
            border: 1px solid rgb(95, 93, 93);
        }
        
        .current {
            background: red;
            color: white;
        }
    </style>
</head>

<body>
    <ul id="list">

    </ul>
    <div id="pagecut">
        <select name="" id="sec">
            <option value="5">每页5条数据</option>
            <option value="5">每页5条数据</option>
        </select>
        <div class='pages'>
            <p class='btnleft'>＜</p>
            <ol>

            </ol>
            <p class='btnright'>＞</p>
        </div>

    </div>
    <!-- <script src="./page_cut.js"></script> -->
    <script>
        class cutPage {
            constructor(obj) {
                this.data = obj.data;
                this.pageLength = obj.pageLength;
                this.cb1 = obj.cb1;
                this.cb2 = obj.cb2;
                this.sec = this.getdom('#sec');
                this.ol = this.getdom('ol')
                this.ul = this.getdom('#list');
                this.btnleft = this.getdom('.btnleft');
                this.btnright = this.getdom('.btnright');
                this.init()

            }
            init() {
                this.getdom();
                this.renderselect();

                this.page = this.pageLength[0];

                this.pagenumer = 1;
                this.pagenum = Math.ceil(this.data.length / this.page);
                this.renderpage();
                this.rendercontent();
                this.lis = Array.from(this.ol.querySelectorAll('li'));
                this.addevent()
            }
            getdom(ele, parent) {
                    return ele = (typeof ele == Object) ? ele : (parent || document).querySelector(ele)
                }
                //@1渲染固定的 下拉列表数据
            renderselect() {
                    let html = '';
                    this.pageLength.forEach((i) => {
                        html += `<option value="${i}">每页${i}条数据</option>`
                    })
                    return this.sec.innerHTML = html;
                }
                //@2根据每页的条数 渲染分为几页
            renderpage() {
                    let html = '';
                    for (let i = 1; i <= this.pagenum; i++) {
                        html += `<li>${i}</li>`
                    }
                    this.ol.innerHTML = html;
                    this.ol.children[0].className = 'current'
                }
                //@3 根据 @1得出页面的条数以及@2得出渲染哪几条
            rendercontent() {
                let datas = this.data.slice(this.sec.value * 1 * (this.pagenumer * 1 - 1), this.sec.value * this.pagenumer);
                let htmlul = datas.map((item) => {
                    return `<li>${item}</li>`
                }).join('')
                this.ul.innerHTML = htmlul;


            }
            addevent() {
                this.btnleft.onclick = (() => {
                    if (this.pagenumer > 1) {
                        this.pagenumer--;

                        this.cb2(this.pagenumer, this.lis[this.pagenumer * 1 - 1])
                        this.rendercontent();
                    }
                })
                this.btnright.onclick = (() => {
                    if (this.pagenumer < this.pagenum) {
                        this.pagenumer++;
                        this.cb2(this.pagenumer, this.lis[this.pagenumer * 1 - 1])
                        this.rendercontent();
                    }
                })
                this.sec.onchange = (() => {
                    this.page = this.sec.value;
                    this.pagenum = Math.ceil(this.data.length / this.page);
                    this.renderpage();
                    this.rendercontent();
                    console.log(23)

                })
                this.ol.onclick = ((e) => {
                    let target = e.target;
                    if (target.tagName == 'LI') {
                        this.pagenumer = target.innerHTML;
                        this.cb2(this.pagenumer, target)
                        this.rendercontent();

                    }
                })
            }
        }

        var obj = new cutPage({
            el: document.getElementById("pagecut"), //类挂载的元素
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], //总数据
            pageLength: [2, 5, 10, 15], //每页显示的数据条数；（select框显示的数据）

            //select框中的每页展示条数改变时触发，获取到当前选择的每页显示的条数
            cb1: function(data) {

            },

            //页码改变时触发，接受到当前页的数据
            cb2: function(data, target) {

                for (let i = 0; i < this.lis.length; i++) {
                    this.lis[i].classList.remove('current')
                }
                target.classList.add('current')

                //修改类

            }
        })
    </script>
</body>

</html>